<template>
  <view class="compareindex_container app_container_page">
    <view class="app_bgwith_wave compare_box">
      <view class="compare_box_top">
        <view><van-icon name="warning" />您的好友邀请您一起来进行 体侧报告对比</view>
      </view>
      <view class="compare_box_content">
        <view class="content_title">通过对比，您可以了解</view>
        <view class="content_row">孩子的身高是否达标</view>
        <view class="content_row">孩子的体重是否达标</view>
        <view class="content_row">孩子的运动指标是否达标</view>
        <view class="content_row">孩子的体质情况</view>
        <view class="content_row">孩子的膳食营养是否科学</view>
        <view class="content_row">......</view>
      </view>
    </view>
    <view class="compare_bottom">
      <view class="app_button" @click="handleJoin"> 立即参与 </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'compareindex',
  // components: {},
  data() {
    return {}
  },
  methods: {
    handleJoin() {
      // 是否登录
      if (!this.$checkLogin()) return
      uni.navigateTo({
        url: '/pagesSub/compare/unlockReportList'
      })
    }
  },
  onLoad(option) {
    const compareReportId = +option.compareReportId
    // 进入对比模式
    this.$store.commit('SET_VALUE', {
      key: 'isComparing',
      val: true
    })
    this.$store.commit('SET_VALUE', {
      key: 'compareReportId',
      val: compareReportId
    })
  }
}
</script>

<style lang="scss">
.compareindex_container {
  .compare_box {
    min-height: calc(100vh - 300rpx);
    padding: 58rpx;
  }

  .compare_box_top {
    padding: 27rpx 87rpx 30rpx 96rpx;
    background-color: #ffffd7;
    font-size: 40rpx;
    height: 200rpx;
    border-radius: 40rpx;
    line-height: 75rpx;

    view {
      position: relative;

      .van-icon {
        position: absolute;
        left: -70rpx;
        top: 14rpx;
        color: #ff6600;
        font-size: 50rpx;
      }
    }
  }

  .compare_box_content {
    background-color: #ffffd7;
    border-radius: 40rpx;
    text-align: center;
    margin-top: 58rpx;
    padding-bottom: 58rpx;
    min-height: calc(100vh - 710rpx);
    @include boxWithDashed();
  }

  .content_title {
    font-size: 40rpx;
    padding: 58rpx 0;
  }

  .content_row {
    font-size: 30rpx;

    & ~ .content_row {
      margin-top: 20rpx;
    }
  }

  .compare_bottom {
    display: flex;
    justify-content: center;
    padding: 100rpx 0;
  }
}
</style>
